<template>
    <div class="headers">
        <div class="header-left">
            <p class="title">站点管理</p>
        </div>
        <div class="menu">
          <a @click="link('jenkins')">Jenkins</a>
          <a @click="link('gitea')">Gitea</a>
          <a @click="link('grafana')">Grafana</a>
          <a @click="link('sonarqube')">Sonarqube</a>
          <a @click="link('kuboard')">Kuboard</a>
          <a @click="link('harbor')">Harbor</a>
          <a @click="link('skywalking')">Skywalking</a>
          <a @click="link('ceph')">Ceph</a>
          <a @click="link('confluence')">Confluence</a>
            <span>{{ $store.state.href }}</span>
        </div>
        <div class="header-right">
            <div class="user-operate">
                <el-dropdown trigger="click" @command="handleCommand">
				<span class="el-dropdown-link">
					{{ userName }}<i class="el-icon-caret-bottom el-icon--right"></i>
				</span>
                    <el-dropdown-menu slot="dropdown" class="myMenu">

                        <router-link to="/MyData">
                            <el-dropdown-item>我的资料</el-dropdown-item>
                        </router-link>
                        <router-link to="/ChangePassword">
                            <el-dropdown-item>修改密码</el-dropdown-item>
                        </router-link>
                        <el-dropdown-item command="loginOut">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
    </div>
</template>
<script>
import {mapState, mapMutations, mapActions, mapGetters} from 'vuex'

export default {
    data() {
        return {
            blankLogoSrc: require('../assets/default.png')
        }
    },
    computed: {
        onRoutes() {
            let arr = this.$route.path.split('/');
            return '/' + arr[1];
        },
        corpName() {
            return jv.main.corp.name;
        },
        // planName() {
        //     return jv.store.getJson("plan").name;
        // },
        logoSrc() {
            return jv.main.corp.logo && jv.main.corp.logo.fullUrl || this.blankLogoSrc;
        },
        userName() {
            return jv.main.user.name;
        }
    },
    methods: {
        link(name) {
            this.$store.commit("link",{name:name,version: jv.random()})
        },
        // ...mapMutations({
        //     link: 'link'
        // }),
        //退出
        handleCommand(command) {
            if (command === 'loginOut') {
                this.$http.post("/open/logout").then(res => {
                    window.location = "/admin-web";
                });
            }
        }
    }
}

</script>
<style scoped>
.headers {
    display: flex;

}

.header-left .title {
    padding: 10px;
    font-size: 20px;
}

.menu {
    margin-left: 100px;
    display: flex;
    flex: 1;
}

.menu a {
    cursor: pointer;
    margin: 10px;
}

.menu span {
    margin: 10px;
    margin-left: 100px;
}

.header-right {
    display: flex;
    align-items: flex-end;
    margin-right: 40px;
}
</style>
